<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}
</style>
<script>

// var box = document.querySelector('.box');
// console.log( box );// null

// DOMContentLoaded DOM加载完成（DOM树构建完成）时触发
// window.addEventListener('DOMContentLoaded',function (){
//     console.log( 'DOM加载完成。。。1' );
//     var box = document.querySelector('.box');
//     console.log( box );// <div class="box">box</div>
// });

</script>
</head>
<body>
    
<div class="box">box</div>
<img src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">

<script>
// 为什么通常JS脚本放在body标签结束之前这个位置？
// 1.确保能够获取到页面中所有的元素（DOM加载完成）
// 2.JS执行不会阻塞页面渲染

// var box = document.querySelector('.box');
// console.log( box );// <div class="box">box</div>


// DOMContentLoaded DOM加载完成（DOM树构建完成）时触发
// window.addEventListener('DOMContentLoaded',function (){
//     console.log( 'DOM加载完成。。。2' );
//     var box = document.querySelector('.box');
//     console.log( box );// <div class="box">box</div>
// });

// load 加载事件
// window.onload = function (){
//     // 整个页面所有资源(html css js img 音视频 DOM等等)加载完成时触发
//     console.log( '资源加载完成。。。' );

//     var img = document.querySelector('img');
//     console.log( img.clientWidth );// 800 图片加载完成
//     console.log( img.clientHeight );// 500 图片加载完成
// }

var img = document.querySelector('img');
// console.log( img.clientWidth );// 0 图片没加载完成
// console.log( img.clientHeight );// 0 图片没加载完成

img.onload = function (){
    console.log( '图片加载完成。。。' );
    console.log( img.clientWidth );// 800 图片加载完成
    console.log( img.clientHeight );// 500 图片加载完成
}

</script>
</body>
</html>